<!-- 时间轴轨道组件 -->
<template>
  <div 
    class="timeline-track" 
    :class="{ 'selected': isSelected }"
    @click="$emit('select', track)"
  >
    <div class="track-header">
      <div class="track-visibility">
        <n-button quaternary circle size="tiny" @click.stop="toggleVisibility">
          <template #icon>
            <n-icon>
              <component :is="track.visible ? EyeOutline : EyeOffOutline" />
            </n-icon>
          </template>
        </n-button>
      </div>
      <div class="track-name">{{ track.name }}</div>
      <div class="track-lock">
        <n-button quaternary circle size="tiny" @click.stop="toggleLock">
          <template #icon>
            <n-icon>
              <component :is="track.locked ? LockClosedOutline : LockOpenOutline" />
            </n-icon>
          </template>
        </n-button>
      </div>
    </div>
    <div class="track-content">
      <slot></slot>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from 'vue'
import { NButton, NIcon } from 'naive-ui'
import { 
  EyeOutline, 
  EyeOffOutline, 
  LockClosedOutline, 
  LockOpenOutline 
} from '@vicons/ionicons5'
import { Track } from '../../types/editor'

// 定义属性
const props = defineProps({
  track: {
    type: Object as () => Track,
    required: true
  },
  isSelected: {
    type: Boolean,
    default: false
  }
})

// 定义事件
const emit = defineEmits(['select', 'update:track'])

// 切换轨道可见性
const toggleVisibility = () => {
  const updatedTrack = {
    ...props.track,
    visible: !props.track.visible
  }
  emit('update:track', updatedTrack)
}

// 切换轨道锁定状态
const toggleLock = () => {
  const updatedTrack = {
    ...props.track,
    locked: !props.track.locked
  }
  emit('update:track', updatedTrack)
}
</script>

<style lang="scss" scoped>
.timeline-track {
  display: flex;
  height: 30px;
  border-bottom: 1px solid var(--border-color-base);
  
  &.selected {
    background-color: var(--primary-color-hover);
  }
  
  .track-header {
    width: 160px;
    display: flex;
    align-items: center;
    padding: 0 8px;
    border-right: 2px solid var(--border-color-base);
    background-color: var(--card-color);
    
    .track-visibility, .track-lock {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 24px;
    }
    
    .track-name {
      flex: 1;
      margin: 0 8px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  
  .track-content {
    flex: 1;
    position: relative;
    height: 100%;
    overflow: hidden;
  }
}
</style> 